<template>
	<view class="register">
		<view class="content">
			<!-- 头部logo -->
			<view class="header"><image :src="logoImage" mode="aspectFit"></image></view>
			<!-- 主体 -->
			<view class="main">
				<wInput v-model="phoneData" type="text" maxlength="11" placeholder="手机号"></wInput>
				<wInput v-model="passData" type="password" maxlength="11" placeholder="登录密码" isShowPass></wInput>
				<!-- <wInput v-model="verCode" type="number" maxlength="4" placeholder="验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput> -->
				<view class="main-code">
					<text class="code-title">账号类型:</text>
					<checkboxType ref="checkbox" @change="valueChange"></checkboxType>
				</view>
				<view class="main-code" v-show="isCheckbox">
					<text class="code-title">二级账号类型:</text>
					<checkboxType ref="checkbox1"></checkboxType>
				</view>
			</view>

			<wButton text="注 册" :rotate="isRotate" @click.native="startReg()"></wButton>
		</view>
	</view>
</template>

<script>
var _this
import wInput from '@/components/watch-login/watch-input.vue' //input
import wButton from '@/components/watch-login/watch-button.vue' //button
import checkboxType from '@/components/checkbox-type/checkbox-type.vue'

export default {
	data() {
		return {
			//logo图片 base64
			logoImage: '/static/logo.jpg',
			phoneData: '', // 用户/电话
			passData: '', //密码
			verCode: '', //验证码
			isRotate: false, //是否加载旋转
			isCheckbox: false // 二级类型
		}
	},
	components: {
		wInput,
		wButton,
		checkboxType
	},
	mounted() {
		_this = this
		this.setTypeCode()
		this.setTypeCode1()
	},
	methods: {
		setTypeCode() {
			/* 设置 单选框 */
			this.$refs.checkbox.set({
				type: 'radio', // 类型：单选框
				index: 0, // 默认选中的项
				column: 3, // 分列
				list: [
					// 列表数据
					{ text: '供应商', value: 2 },
					{ text: '业主', value: 3 },
					{ text: '监理', value: 4 },
					{ text: '工长', value: 5 },
					{ text: '施工员', value: 6 }
				]
			})
		},
		setTypeCode1() {
			/* 设置 复选框 */
			this.$refs.checkbox1.set({
				type: 'checkbox', // 类型：单选框
				column: 3, // 分列
				list: [
					// 列表数据
					{ text: '瓦工', value: 7 },
					{ text: '木工', value: 8 },
					{ text: '水电工', value: 9 },
					{ text: '油漆工', value: 10 }
				]
				// maxSize: 5, // 最大选择数量
				// maxFn: () => {
				// 	// 超出最大选择数量时的回调函数
				// 	// 此处可输出当前页面的数据
				// 	// console.log(this.array);
				// 	uni.showToast({
				// 		title: '最多只能选择5个',
				// 		icon: 'none',
				// 		duration: 1000,
				// 		mask: false
				// 	})
				// }
			})
		},
		valueChange(data) {
			if (data.value === 6) {
				this.isCheckbox = true
			} else {
				this.isCheckbox = false
			}
		},
		getVerCode() {
			//获取验证码
			if (_this.phoneData.length !== 11) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '手机号不正确'
				})
				return false
			}
			console.log('获取验证码')
			const params = {
				phone: _this.phoneData
			}
			_this.isRotate = true
			this.$api
				.getSMSCode(params)
				.then(res => {
					if (res.success) {
						//触发倒计时（一般用于请求成功验证码后调用）
						this.$refs.runCode.$emit('runCode')
						uni.showToast({ title: '验证码已发送', icon: 'success' })
						// setTimeout(() => {
						//   uni.navigateTo({
						//       url: '../login/login'
						//   })
						// }, 1000)
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
					_this.isRotate = false
				})
				.catch(err => {
					console.log('request fail', err)
				})

			// setTimeout(function() {
			// 终止倒计时（用于突然需要终止倒计时的场景）
			// _this.$refs.runCode.$emit('runCode', 0)
			// }, 3000)
		},
		startReg() {
			// 注册
			if (this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false
			}
			if (this.phoneData.length !== 11) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '手机号不正确'
				})
				return false
			}
			if (this.passData.length < 6) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '密码不能小于6位'
				})
				return false
			}
			// if (this.verCode.length < 4) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		position: 'bottom',
			// 		title: '验证码错误'
			// 	})
			// 	return false
			// }
			_this.isRotate = true
			const params = {
				account: this.phoneData,
				pwd: this.passData,
				// code: this.verCode,
				code: 1234,
				typecode: this.$refs.checkbox.get().value
			}
			if (this.isCheckbox) {
				const data = this.$refs.checkbox1.get()
				if (!data) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请选择账号类型'
					})
					return false
				}
				let codeType = ''
				data.map(item => {
					codeType = codeType + item.value + ','
				})
				console.log(codeType)
				params.typeLevel = codeType
			}
			this.$api.linkRegister(params)
				.then(res => {
					if (res.success) {
						uni.showToast({ title: '注册成功', icon: 'success' })
						setTimeout(() => {
							uni.navigateTo({
								url: '../login/login'
							})
						}, 1000)
					} else {
						uni.showToast({ title: res.msg, icon: 'none' })
					}
					_this.isRotate = false
				})
				.catch(err => {
					console.log('request fail', err)
				})
		}
	}
}
</script>

<style lang="scss" scoped>
@import url('@/pages/login/css/main.css');
</style>
